<template name="smaltPayPalCreditCardForm">
    <div id="paypal-form">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <i class="fa fa-credit-card"></i>
                    {{_ 'payPal.payment.payer.fundingInstruments.creditCard.form.title'}}
                    <strong class="paypal-form-amout pull-right">
                        {{> smaltPayPalCreditCardFormAmount}}
                    </strong>
                </h3>
            </div>
            <div class="panel-body">
                <form id="{{id}}">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label for="first_name">{{_ 'payPal.payment.payer.fundingInstruments.creditCard.form.firstName.label'}}</label>
                                        <input id="first_name" class="form-control" name="first_name" type="text" placeholder="{{_ 'payPal.payment.payer.fundingInstruments.creditCard.form.firstName.placeholder'}}" required>
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label for="last_name">{{_ 'payPal.payment.payer.fundingInstruments.creditCard.form.lastName.label'}}</label>
                                        <input id="last_name" class="form-control" name="last_name" type="text" placeholder="{{_ 'payPal.payment.payer.fundingInstruments.creditCard.form.lastName.placeholder'}}" required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="number">{{_ 'payPal.payment.payer.fundingInstruments.creditCard.form.number.label'}}</label>
                                <input id="number" class="form-control" name="number" type="text" placeholder="{{_ 'payPal.payment.payer.fundingInstruments.creditCard.form.number.placeholder'}}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-xs-6">
                                        <label for="expire_month">{{_ 'payPal.payment.payer.fundingInstruments.creditCard.form.expireMonth.label'}}</label>
                                        <select id="expire_month" name="expire_month" class="form-control" required>
                                            {{#each months}}
                                                <option value="{{value}}" selected="{{isSelected}}">{{text}}</option>
                                            {{/each}}
                                        </select>
                                    </div>
                                    <div class="col-xs-6">
                                        <label for="expire_year">{{_ 'payPal.payment.payer.fundingInstruments.creditCard.form.expireYear.label'}}</label>
                                        <input id="expire_year" class="form-control" name="expire_year" type="text" placeholder="{{thisYear}}" required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-xs-6">
                                        <label for="type">{{_ 'payPal.payment.payer.fundingInstruments.creditCard.form.type.label'}}</label>
                                        <select id="type" name="type" class="form-control" required>
                                            {{#each cards}}
                                                <option value="{{value}}" class="{{classes}}" selected="{{isSelected}}">{{text}}</option>
                                            {{/each}}
                                        </select>
                                    </div>
                                    <div class="col-xs-6">
                                        <label for="cvv">{{_ 'payPal.payment.payer.fundingInstruments.creditCard.form.cvv.label'}}</label>
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="fa fa-lock"></i>
                                            </span>
                                            <input id="cvv" class="form-control" name="cvv2" type="password" placeholder="{{_ 'payPal.payment.payer.fundingInstruments.creditCard.form.cvv.placeholder'}}" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{#unless noButton}}
                        {{> smaltPayPalCreditCardFormButton}}
                    {{/unless}}
                </form>
            </div>
        </div>
    </div>
</template>
